import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_vant_ui/flutter_vant_ui.dart';

import '../../demos/demos.dart';

class VanDocDemoFormSection extends StatelessWidget {
  const VanDocDemoFormSection({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Form")),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20),
            Builder(builder: (context) {
              final username = ref('');
              final password = ref('');
              onSubmit(values) {
                if (kDebugMode) print('submit:$values');
              }

              return VanForm(
                required: false,
                onSubmit: onSubmit,
                children: [
                  VanCellGroup(
                    inset: true,
                    children: [
                      VanField(label: "用户名", name: "username", ctrl: username, rules: const [
                        {"required": true, "message": "请填写用户名"}
                      ]),
                      VanField(label: "密码", name: "password", ctrl: password, rules: const [
                        {"required": true, "message": "请填写密码"}
                      ]),
                    ],
                  ),
                  Container(
                    margin: const EdgeInsets.all(16),
                    child: const VanButton(
                      round: true,
                      block: true,
                      type: VanButtonType.primary,
                      nativeType: VanButtonNativeType.submit,
                      child: "提交",
                    ),
                  )
                ],
              );
            }),
            //
            const VanDocDemoBlockTitle(title: "校验规则", paddingTop: 20),
            Builder(builder: (context) {
              final value1 = ref('');
              final value2 = ref('');
              final value3 = ref('abc');
              final value4 = ref('');
              final pattern = RegExp(r"\d{6}");
              validator(val) => RegExp(r"1\d{10}").hasMatch("$val");
              validatorMessage(val) => "$val不合法，请重新输入";

              asyncValidator(val) {
                return Future.delayed(const Duration(milliseconds: 1000), () {
                  return (val == "1234");
                });
              }

              onFailed(VanFormErrorInfo errorInfo) {
                if (kDebugMode) print("errorInfo:$errorInfo");
              }

              return VanForm(onFailed: onFailed, children: [
                VanCellGroup(inset: true, children: [
                  VanField(name: "pattern", ctrl: value1, placeholder: "正则校验", rules: [
                    {"pattern": pattern, "message": '请输入正确内容'}
                  ]),
                  VanField(name: "validator", ctrl: value2, placeholder: "函数校验", rules: [
                    {"validator": validator, "message": '请输入正确内容'}
                  ]),
                  VanField(name: "validatorMessage", ctrl: value3, placeholder: "校验函数返回错误提示", rules: [
                    {"validator": validatorMessage}
                  ]),
                  VanField(name: "asyncValidator", ctrl: value4, placeholder: "异步函数校验", rules: [
                    {"validator": asyncValidator, "message": '请输入正确内容'}
                  ]),
                ]),
                Container(
                  margin: const EdgeInsets.all(16),
                  child: const VanButton(
                    round: true,
                    block: true,
                    type: VanButtonType.primary,
                    nativeType: VanButtonNativeType.submit,
                    child: "提交",
                  ),
                )
              ]);
            }),
            //
            const VanDocDemoBlockTitle(title: "表单项类型", paddingTop: 20),
            Builder(builder: (context) {
              final checkedRef = ref(false);
              final groupCheckedRef = ref([]);
              return VanForm(children: [
                VanCellGroup(inset: true, children: [
                  // 表单项类型 - 开关
                  VanField(
                    name: "switch",
                    label: "开关",
                    input: VanSwitch(controller: checkedRef),
                  ),
                  // 表单项类型 - 复选框
                  VanField(
                    name: "checkbox",
                    label: "复选框",
                    input: VanCheckbox(controller: checkedRef, shape: VanCheckboxShape.square),
                  ),
                  VanField(
                    name: "checkboxGroup",
                    label: "复选框组",
                    input: VanCheckboxGroup(
                      controller: groupCheckedRef,
                      direction: VanCheckboxDirection.horizontal,
                      children: const [
                        VanCheckbox(value: "1", shape: VanCheckboxShape.square, child: "复选框 1"),
                        VanCheckbox(value: "2", shape: VanCheckboxShape.square, child: "复选框 2"),
                      ],
                    ),
                  ),
                  Builder(builder: (context) {
                    final checkedRef = ref("1");
                    return VanField(
                      name: "radio",
                      label: "单选框",
                      input: VanRadioGroup(
                        controller: checkedRef,
                        direction: VanRadioDirection.horizontal,
                        children: const [
                          VanRadio(value: "1", child: "单选框 1"),
                          VanRadio(value: "2", child: "单选框 2"),
                        ],
                      ),
                    );
                  }),
                ]),
                Container(
                  margin: const EdgeInsets.all(16),
                  child: const VanButton(
                    round: true,
                    block: true,
                    type: VanButtonType.primary,
                    nativeType: VanButtonNativeType.submit,
                    child: "提交",
                  ),
                ),
              ]);
            })
          ],
        ),
      ),
    );
  }
}
